<script>
import {defineComponent} from 'vue'
import Item from "@/components/Item.vue";

export default defineComponent({
  name: "List",
  props: {
    todos: {
      type: Array,
      required: true,
    },
    changeDone: {
      type: Function,
      required: true
    },
    removeTodoObj:{
      type: Function,
      required: true
    }
  },
  components: {Item},
})
</script>

<template>
  <ul class="list">
    <Item v-for="(todo,index) in todos" :key="todo.id" :todo="todo" :changeDone="changeDone" :removeTodoObj="removeTodoObj"></Item>
  </ul>
</template>

<style scoped lang="less">
.list {
  width: 100%;
  height: 300px;
  border: 2px solid #DCDCDC;
  margin-top: 10px;
}
</style>
